<template>
  <div>
    <div class="box">
      <div class="top flex between">
        <div class="top-l" ref="topL">左边</div>
        <div class="top-r">
          <el-table
          max-height="330"
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="date"
            label="日期"
            width="100">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="100">
          </el-table-column>
          <el-table-column
            prop="data1"
            label="数据1"
            width="100">
          </el-table-column>
          <el-table-column
            prop="data2"
            label="数据2"
            width="100">
          </el-table-column>
         
        </el-table>
        </div>
      </div>
      <div class="bottom flex">
        <div ref="yibiao">1</div>
        <div>2</div>
        <div ref="china"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';  // 引入可视化库
import chinaJson from './../js/china'
export default {
  data () {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      },{
        date: '2016-05-02',
        name: '王小虎',
        data1: 10,
        data2: 20
      }]
    }
  },
  // 界面加载自动执行这个函数
  mounted () {
    // echarts 注册地图
    echarts.registerMap('china', {
      geoJSON: chinaJson
    })
    var chinaOption =  {
    title: {
      left: 10,
      right: 10,
      text: '中国地图',
      textStyle: {
        color: '#000',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      y: 'bottom',
      x: 'right',
      textStyle: {
        color: '#000',
      },
    },
    geo: {
      map: 'china',
      zoom: 1.1,
      scaleLimit: {
        min: 0.5,
        max: 3,
      },
      roam: true,
      itemStyle: {
        areaColor: '#D27F93',
        borderColor: '#111',
      },
      emphasis: {
        label: {
          show: false,
        },
        itemStyle: {
          areaColor: '#CAAAA3',
        }
      }
    }
    }
    var china = echarts.init(this.$refs.china) 
    china.setOption(chinaOption)


    // 仪表盘
    var yibiao = echarts.init(this.$refs.yibiao) 
    yibiao.setOption({
      tooltip: {
        formatter: '{a} <br/>{b} : {c}%'
      },
      series: [
        {
          name: 'Pressure',
          type: 'gauge',
          progress: {
            show: true,
            itemStyle: {
              color: '#D27F93'
            }
          },
          radius: '120px',
          detail: {
            valueAnimation: true,
            formatter: '{value}'
          },
          pointer: {
            itemStyle: {
              color: '#D27F93'
            }
          },
          data: [
            {
              value: 50,
              name: '分数'
            }
          ]
        }
      ]
    })
    // 展示折线图

    // 先设置初始化  div元素
    var topL = echarts.init(this.$refs.topL)  // 此处的topL就是初始化好的元素
    // 放置折线图
    // 找一个折线图的配置项
    var option = {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value',
        axisLabel: {
          show: false  // 不显示刻度线附近的文字
        }
      },
      grid: {
        left: '3%',
        right: '3%',
        bottom: '3%',
        containLabel: true
      },
      series: [
        {
          data: [820, 1432, 901, 934, 1290, 1330, 1320],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#D27F93' // 0% 处的颜色
              }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle: { // 修改折线颜色
            color: '#D27F93'
          },
          showSymbol: false  // 去除拐点
        },
        {
          data: [320, 632, 801, 234, 290, 1130, 1520],
          type: 'line',
          smooth: true,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#8BB9B3' // 0% 处的颜色
              }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle: {
            color: '#8BB9B3'
          },
          showSymbol: false

        },
        {
          data: [1220, 1232, 601, 834, 890, 330, 320],
          smooth: true,
          type: 'line',
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                  offset: 0, color: '#93C4ED' // 0% 处的颜色
              }, {
                  offset: 1, color: '#fff' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          lineStyle: {
            color: '#93C4ED'
          },
          showSymbol: false
        }
      ]
    };

    // 给初始化的元素  配置 这个 配置项
    topL.setOption(option)

  }
}
</script>

<style scoped>
.top{
  height: 360px;
  
}
.top-l{
  flex:2;
  background: #fff;
}
.top-r{
  box-sizing: border-box;
  flex: 1;
  margin-left: 15px;
  background: #fff;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}
.bottom>div{
  flex: 1;
  height: 280px;
  background: #fff;
  margin-top: 15px;
  margin-right: 15px;
}
.bottom>div:last-child{
  margin-right: 0;
}
</style>